<!-- <template>
  <div>
    <h3 style="margin-left: 20px">欢迎登录- {{ this.ShowUsername }}</h3>
    <el-card class="box-card">
      <div class="MaxBoxs">
        <div class="TwoBoxs" v-for="news in ShouNews" :key="news.id">
          <div class="TwoLeft">
            <i :class="news.icon"></i>
          </div>
          <div class="TwoRight">
            <p class="RightName">{{ news.name }}</p>
            <h2>{{ news.number }}</h2>
          </div>
        </div>
      </div>
      <div class="MAxEcharts">
        <div class="TopBoxs">
          <h4>订单统计</h4>
          <div>
            <el-date-picker
              v-model="dataTab"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-button @click="getEchartDada()">查询</el-button>
          </div>
        </div>
        <div class="BottomEcharts">
         
          <div id="main" class="EchartsRight"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getCount, getCountDay } from "@/api/table";
export default {
  data() {
    return {
      dataTab: [],
      dayData: { beginTime: this.getSevenDaysAgo(), endTime: "" },
      ShowUsername: "",
      ShouNews: [
        {
          id: 1,
          icon: "el-icon-document",
          name: "今日客户上传条数",
          number: 0,
        },
        {
          id: 2,
          icon: "el-icon-document",
          name: "今日客户反馈条数",
          number: 0,
        },
        {
          id: 3,
          icon: "el-icon-coin",
          name: "近7天客户上传条数",
          number: 0,
        },
        {
          id: 4,
          icon: "el-icon-data-line",
          name: "近7天客户反馈条数",
          number: 0,
        },
      ],
      option: {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        title: {
          text: "近一周订单统计",
          textStyle: {
            color: "#ccc",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [],
      },
    };
  },

  watch: {},
  mounted() {
    this.ShowUsername = localStorage.getItem("CsvUsername");
    this.myEcharts();
  },
  created() {
    this.getUserData();
    this.getEchartDada();
  },

  methods: {
    myEcharts() {
      var myChart = this.$echarts.init(document.getElementById("main"));

      myChart.setOption(this.option);
    },
    getCurrentDateFormatted() {
      const now = new Date();

      const year = now.getFullYear(); // 直接获取完整年份
      const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份加1并转换为字符串，如果小于10则前面补0
      const day = String(now.getDate()).padStart(2, "0"); // 日期转换为字符串，如果小于10则前面补0

      // 拼接成2024-07-12这样的格式
      return `${year}-${month}-${day}`;
    },
    // 获取七天前时间
    getSevenDaysAgo() {
      const now = new Date(); // 获取当前时间
      const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000); // 减去7天的时间戳

      // 获取七天前的年、月、日（注意月份是从0开始的，日期可能需要补零）
      const year = sevenDaysAgo.getFullYear();
      const month = String(sevenDaysAgo.getMonth() + 1).padStart(2, "0");
      const day = String(sevenDaysAgo.getDate()).padStart(2, "0");

      // 拼接成日期字符串
      return `${year}-${month}-${day}`;
    },
    // 获取首页用户数据
    async getUserData() {
      // 当天数据
      let res = await getCount({ beginTime: this.getCurrentDateFormatted() });
      let intradayUploadCount = 0;
      let intradayGobackCount = 0;
      if (res.data) {
        for (const key in res.data) {
          // console.log(res.data[key]);
          intradayUploadCount += res.data[key].uploadCount;
          intradayGobackCount += res.data[key].gobackCount;
        }
      }
      this.ShouNews[0].number = intradayUploadCount;
      this.ShouNews[1].number = intradayGobackCount;

      // 七天前数据
      let SevenDaysData = await getCount({ beginTime: this.getSevenDaysAgo() });
      let SevenDaysUploadCount = 0;
      let SevenDaysGobackCount = 0;
      if (SevenDaysData.data) {
        for (const key in SevenDaysData.data) {
          SevenDaysUploadCount += SevenDaysData.data[key].uploadCount;
          SevenDaysGobackCount += SevenDaysData.data[key].gobackCount;
        }
      }
      this.ShouNews[2].number = SevenDaysUploadCount;
      this.ShouNews[3].number = SevenDaysGobackCount;
    },
    // 获取首页图表数据
    async getEchartDada() {
      if (!this.dataTab || this.dataTab.length === 0) {
        this.dayData.beginTime = this.getSevenDaysAgo();
        this.dayData.endTime = "";
      } else {
        this.dayData.beginTime = this.dataTab[0];
        this.dayData.endTime = this.dataTab[1];
      }
      this.option.series = [];
      // 获取当前登录角色
      let role = localStorage.getItem("CsvRole");
      console.log(role);
      let res = null;
      if (role === "admin") {
        res = await getCount(this.dayData);
        console.log(res, 111);
      } else {
        res = await getCountDay();
        console.log(res, 2222);
      }
      // 客户端数据

      let Xname = [];
      let YGobackCount = [];
      let YUploadCount = [];

      for (const key in res.data) {
        if (role === "admin") {
          Xname.push(res.data[key].nikename);
        } else {
          Xname.push(res.data[key].date);
        }

        YGobackCount.push(res.data[key].gobackCount);
        YUploadCount.push(res.data[key].uploadCount);
      }
      this.option.xAxis[0].data = Xname;
      this.option.series.push({
        name: "反馈条数",
        type: "line",
        stack: "Total",
        data: YGobackCount,
      });
      this.option.series.push({
        name: "上传条数",
        type: "line",
        stack: "Total",
        data: YUploadCount,
      });
      var myChart = this.$echarts.init(document.getElementById("main"));
      myChart.setOption(this.option);
    },
  },
};
</script>

<style lang="scss" scoped>
.MaxBoxs {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.TwoBoxs {
  width: 280px;
  height: 120px;
  border: 2px solid #6bb8ff;
  background-color: #dbeefc;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 1px 10px;
}

.TwoLeft {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  color: #1890ff;
}

.TwoRight {
  width: 70%;

  .RightName {
    color: #999999;
  }
}

.MAxEcharts {
  width: 90%;
  margin: 50px 0px 20px 0px;
  box-sizing: border-box;
  display: flex;
  /* align-items: fl; */
  justify-content: space-between;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.TopBoxs {
  width: 100%;
  height: 5%;
  background-color: #a5d4ff;
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  h4 {
    margin: 0px 20px;
    box-sizing: border-box;
  }
}

.BottomEcharts {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-top: 20px;
  box-sizing: border-box;
}

.echartsLeft {
  display: flex;
  flex-direction: column;
  margin: 10px 20px;
  box-sizing: border-box;

  .zengzhang {
    font-size: 12px;
    display: flex;
    align-items: center;
    color: #ccc;
  }
  div {
    margin-bottom: 30px;
  }
}

.EchartsRight {
  width: 100%;
  height: 400px;
}
</style> -->



<template>
  <div>
    <h1>Hello, 欢迎使用</h1>
    
  </div>
</template>
